<template>
  <div class="default-main ba-table-box">
    <TableHeader
      :buttons="[
        'refresh',
        'add',
        'edit',
        'remove',
        'comSearch',
        'unfold',
        'columnDisplay',
      ]"
      :quick-search-placeholder="placeholder"
      @action="baTable.onTableHeaderAction"
    />
    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <Table ref="tableRef" :pagination="false" @action="baTable.onTableAction" />
    <!-- 表单 -->
    <PopupForm />
    <!-- <button @click="rgionCeshiBegin">VVV</button> -->
  </div>
</template>
<script lang="ts" setup>
import { ref, provide, onMounted, reactive } from "vue";
import baTableClass from "@/utils/baTable";
import { baTableApi, operatorShowOff } from "@/utils/common"; // 导入表格api方法生成器
import { sysMRegion } from "@/api/backend/index";
import Table from "@/components/table/index.vue";
import TableHeader from "@/components/table/header/index.vue";
import PopupForm from "./popupForm.vue";
import { useRoute } from "vue-router";
import { useNavTabs } from "@/store/navTabs";
import type { TableRow, TableColumn } from "@/utils/baTable"; //表格列行类型

// import { _post } from "@/utils/axios";

const placeholder = ref<string>("模糊搜索");
const tableRef = ref();
const route = useRoute();
const navTabs = useNavTabs();

//字段显隐记忆功能
const filedShowOff = (filter: any) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return true;
};
// 每页个数记忆功能 默认10000个
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(route.path + sysMRegion)
      ? (navTabs as any).pageSizeMap.get(route.path + sysMRegion)
      : 10000;
  }
  return 10000;
};

const baTable = new baTableClass(
  new baTableApi(sysMRegion),
  {
    pk: "areaId", //区域ID
    column: [
      { type: "selection", align: "center", operator: false },
      {
        show: filedShowOff("areaNo"),
        label: "区域编号",
        prop: "areaNo",
        align: "left",
        width: "210",
        operator: false,
      },
      {
        show: filedShowOff("areaName"),
        label: "区域名称",
        prop: "areaName",
        align: "left",
      },
      {
        show: filedShowOff("createTime"),
        label: "创建时间",
        prop: "createTime",
        align: "left",
        render: "datetime",
        operator: false,
        width: "180",
      },
      {
        show: filedShowOff("startTime"),
        label: "投运时间",
        prop: "startTime",
        align: "left",
        operator: false,
      },
      {
        show: filedShowOff("endTime"),
        label: "停运时间",
        prop: "endTime",
        align: "left",
        operator: false,
      },
      {
        show: filedShowOff("remark"),
        label: "备注",
        prop: "remark",
        align: "left",
        operator: false,
      },
      {
        show: filedShowOff("parentId"),
        label: "上级区域",
        prop: "parentId",
        align: "left",
        width: "100",
        operator: false,
      },
      {
        show: operatorShowOff([
          route.path + "/edit",
          route.path + "/add",
          route.path + "/remove",
        ]),
        label: "操作",
        align: "center",
        width: "130",
        operator: false,
        render: "buttons",
        fixed: "right",
        buttons: [
          {
            render: "tipButton",
            name: "edit",
            title: "编辑",
            text: "",
            type: "primary",
            icon: "iconfont icon-pencil",
            class: "table-row-edit",
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return false;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
          {
            render: "itemAddButton",
            name: "itemAdd", //与add绑定
            title: "新增",
            text: "",
            type: "primary",
            icon: "iconfont icon-xinzeng",
            class: "table-row-edit",
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return false;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
          {
            render: "confirmButton",
            name: "remove",
            title: "删除",
            text: "",
            type: "danger",
            icon: "el-icon-DeleteFilled",
            class: "table-row-delete",
            popconfirm: {
              confirmButtonText: "删除",
              cancelButtonText: "取消",
              confirmButtonType: "danger",
              title: "确定删除所选项吗",
            },
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return false;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
        ],
      },
    ],
    filter: {
      pageNum: 1,
      pageSize: pageSizeKeep(),
    },
  },
  {
    defaultItems: { parentId: 0 },
  }
);
// const regionData: { form: any[] } = reactive({
//   form: [],
// });
// const rgionCeshiBegin = () => {
//   regionPromise(regionData.form);
//   // rgionCeshi(regionData.form, 112);
// };
// const regionPromise = (data: any) => {
//   for (let i = 0, len = data.length; i < len; i++) {
//     (function (j) {
//       setTimeout(function () {
//         rgionCeshi(data[i].children, data[i].parentId);
//       }, 1000 * j);
//     })(data[i].children.length);
//   }
// };
// const rgionCeshi = (data: any, parentId: any) => {
//   for (let i = 0, len = data.length; i < len; i++) {
//     let obj: any = {};
//     obj.areaName = data[i].label;
//     obj.areaNo = data[i].code;
//     obj.parentId = parentId;
//     (function (j) {
//       setTimeout(function () {
//         postRegion(obj);
//       }, 1000 * j);
//     })(i);
//   }
// };
// const postRegion = (data: any) => {
//   _post("/system/region", data, "json", "").then((res) => {
//     console.log(res);
//   });
// };
onMounted(() => {
  //将table的ref给到table类
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(sysMRegion);
});
// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);
</script>
<style lang="scss" scoped></style>
